<template>
	<view class="container">
		<view>
			<cu-custom bgColor="bg-gradual-blue" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">人像照片</block>
			</cu-custom>
		</view>
		<view class="text-container">
			<text class="info-text">
				拍摄本人人脸，请确定正对人脸，光线充足
			</text>
		</view>
		<view class="portrait-view">
			<image class="portrait-image" :src="header" mode="widthFix"></image>
		</view>
		<button form-type="submit" style="margin:40px 40px;" type="primary" @click="startheader" :loading="loading"
		 :disabled="loading">开始拍摄</button>

		<xCompress ref="xCompress" />
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import xCompress from '@/components/x-compress/x-compress.vue'
	import api from '@/common/js/api.js'; // 封装的工具集
	export default {
		components: {
			xCompress
		},
		onShow: function(options)  {
			this.userInfo = this.state.userInfo
			this.header = this.userInfo.photo ?? "../../../../../static/logo.png"
			if(this.userInfo.photo != null){
				this.header = api.baseUrl + this.userInfo.photo
			}
		},
		data() {
			return {
				loading: false,
				header: "../../../../../static/logo.png"
			}
		},
		computed: {
			...mapState('teacher', {
				state: state => state
			}),
		},
		methods: {
			...mapActions('teacher', [
			  'setUserInfo'
			]),
			startheader() {
				let _this = this
				uni.chooseImage({
					count: 6, //默认9
					// sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //album从相册选择 camera相机
					success: async (res) => {
						console.log(res.tempFiles[0].size)
						try {
							let result = await _this.$refs.xCompress.compress(res, {
								base64: false,
								maxW: 1024,
								maxH: 1024,
								quality: 0.8,
								showLoading: true,
								mask: true
							})
							console.log(result[0].file.size)
							uni.uploadFile({
								url: api.baseUrl + 'api/v1/upload/add', 
								// filePath: tempFilePaths[0],
								file: result[0].file,
								name: 'file',
								header: {
									'token': _this.state.token,
								},
								formData: {
									// 'businessId': 'asdasd',
									// 'bussinessType': 'asdasd',
									// 'fileCode': 'asdasd',

								},
								success: (uploadFileRes) => {
									console.log(uploadFileRes);
									let imgData = JSON.parse(uploadFileRes.data)
									if (imgData.viewUrl != '') {
										let data = {
											"id": _this.state.userInfo.id,
											"photo": imgData.viewUrl
										}
										console.log(data)
										//设置人像
										_this.loading = true;
										_this.$api.updateTeacher(data).then((res) => {
											console.log('updateTeacher')
											console.log(res)
											_this.loading = false;
											if (res.code == "200") { //成功
												_this.header = api.baseUrl + imgData.viewUrl
												_this.state.userInfo.photo = imgData.viewUrl
												this["setUserInfo"](_this.state.userInfo)
												console.log(_this.state.userInfo.photo)
											} else {
												// alert("getUserInfo code：" + res.code)
											}
											// console.log('request success', res)
											// this.res = '请求结果 : ' + JSON.stringify(res);

										}).catch((err) => {
											_this.loading = false;
											console.log('request fail', err);
										})
									}
								},
								fail: (err) => {
									console.log(err);
								},
								complete: (res) => {
									console.log(res);
									uni.showToast({
										title: res,
										duration: 3000
									})
								},
							});
						} catch (err) {
							console.log(err)
						}
					},


					// success: function(res) {
					// 	// uni.previewImage({
					// 	// 	urls: res.tempFilePaths
					// 	// })
					// 	console.log(res.size)
					// 	// var file = new File(res.tempFilePaths[0], "image/jpeg");
					// 	// file.type = "image/jpeg"
					// 	// console.log(file)
					// 	// _this.compressImage(res.tempFiles[0])
					// 	// uni.showToast({
					// 	// 	title: "sss",
					// 	// 	duration: 3000
					// 	// })
					// 	imageConversion.compressAccurately(res.tempFiles[0], 0.8).then(res => {
					// 		//The res in the promise is a compressed Blob type (which can be treated as a File type) file;
					// 		console.log(res.size);
					// 		uni.uploadFile({
					// 			url: 'http://47.108.202.110:8081/api/v1/upload/add', //仅为示例，非真实的接口地址
					// 			// filePath: tempFilePaths[0],
					// 			file: res,
					// 			name: 'file',
					// 			header: {
					// 				'token': _this.state.token,
					// 			},
					// 			formData: {
					// 				// 'businessId': 'asdasd',
					// 				// 'bussinessType': 'asdasd',
					// 				// 'fileCode': 'asdasd',

					// 			},
					// 			success: (uploadFileRes) => {
					// 				console.log(uploadFileRes.data);
					// 			},
					// 			fail: (err) => {
					// 				console.log(err);
					// 			},
					// 			complete: (res) => {
					// 				console.log(res);
					// 				uni.showToast({
					// 					title: res,
					// 					duration: 3000
					// 				})
					// 			},
					// 		});
					// 	})
					// 	// _this.compressImage(res.tempFilePaths[0], 200).then(res => {
					// 	// 	console.log("res")
					// 	// 	console.log(res)
					// 	// })
					// 	// let tempPaths = res.tempFilePaths
					// 	// if (tempPaths.length + _this.imgList.length > 6) {
					// 	// 	uni.showToast({
					// 	// 		title: '上传图片最多可选6张',
					// 	// 		icon: 'none'
					// 	// 	})
					// 	// } else {
					// 	// 	// _this.imgList = _this.imgList.concat(tempPaths)
					// 	// 	// _this.compressImage()
					// 	// }
					// }
				})
			},
		}
	}
</script>

<style lang="scss">
	// page {
	// 	background-color: #FFFFFF;
	// }
	.container {
		padding-bottom: 10px;
		background-color: #FFFFFF;
	}
	.text-container {
		display: flex;
		justify-content: center;
		padding-top: 20px;

		.info-text {
			color: #333;
			font-size: 16px;
		}
	}

	.portrait-view {
		display: flex;
		margin: 20px 40px;
		// background-color: #007AFF;

		.portrait-image {
			width: 100%;
		}
	}
</style>
